<template>
	<page-meta :page-style="$theme.pageStyle">
		<!-- #ifndef H5 -->
		<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
		<!-- #endif -->
	</page-meta>
	<view class="ynq-Location">
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		<view class="ynq-AutoLocation flex">
			<navigator url="/pages/index/index" open-type="switchTab">
				<view class="ynq-AutoAddress">
					<text class="ynq ynq-dizhi"></text>
					<text>当前定位：</text>
					<text>{{cityName}}</text>
				</view>
			</navigator>
			<!-- <view class="ynq-ReLocation">
				<text class="ynq ynq-ditudingwei"></text>
				<text>重新定位</text>
			</view> -->
		</view>
	
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in cityList" :key="index">
					<view class="ynq-CityLetter" :id="item.first">{{item.first}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name,item_city.code)" v-for="(item_city,name_index) in item.city" :key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>
		<!-- <u-loading-page :loading="loading"></u-loading-page> -->
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getCitys } from '@/api/shop';
import { onLoad } from '@dcloudio/uni-app';

const LatterName: any = reactive(['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']);
const cityName = ref<any>('凤阳县');
const LetterId = ref<any>('');
const cityList: any = ref([]);
// loading:false


//获取定位点
const getLetter = async (name) => {
	LetterId.value = name
	uni.pageScrollTo({
		selector:'#'+name,
		duration:300
	})
};

//存储城市缓存
const getStorage = async (name,code) => {
	LetterId.value = name
	uni.pageScrollTo({
		selector:'#'+name,
		duration:300
	})
	uni.setStorageSync('cityName',name);
	uni.setStorageSync('cityCode',code);
	//跳转返回
	uni.navigateBack()
};

const getData = async () => {
	const data = await getCitys();
	cityList.value = data;
	uni.setStorageSync('cityList',data);
};


onLoad(() => {
	cityName.value = uni.getStorageSync('cityName');
	if(uni.getStorageSync('cityList')){
		cityList.value = uni.getStorageSync('cityList');
	}else{
		getData();
	}
});
</script>

<style lang="scss" scoped>
	.ynq-Location{
		height: 100vh;
	}
	.ynq-AutoLocation{
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding:20rpx 20rpx;
		
		text.ynq{
			font-size:32rpx;
			margin-right:10rpx;
		}
		text{
			font-size:30rpx;
		}
	}
	
	.ynq-HotCity{
		padding:20rpx;
	}
	.ynq-HotCityTitle{
		padding:0rpx 0rpx;
		text.ynq{
			margin-right:10rpx;
			color: #ff0000;
			font-size:32rpx;
		}
		text{
			font-size:30rpx;
		}
	}
	.ynq-HotCityList{
		padding:20rpx 20rpx 20rpx 0;
		flex-wrap: wrap !important;
		text{
			width: 32%;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			margin-bottom:10rpx;
			font-size:26rpx;
			padding:20rpx 0;
		}
	}
	
	.ynq-Letter{
		position: fixed;
		right:5rpx;
		top:60rpx;
		width: 30rpx;
		z-index:100;
		view{
			display: block;
			width: 30rpx;
			text-align: center;
			height:40rpx;
			line-height: 35rpx;
			font-size: 26rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}
	
	.ynq-CityList{
		padding:0px 40rpx 0 20rpx;
		.ynq-CityLetter{
			line-height: 30rpx;
			height: 40rpx;
			font-size:24rpx;
			border-bottom:1px solid #f7f7f7;
			padding-left:10rpx;
			color: #909090;
		}
		.ynq-CityLine{
			margin:20rpx 0px;
			text{
				display: block;
				line-height: 60rpx;
				padding:0px 10rpx;
				font-size:30rpx;
				color: #767676;
				&:nth-child(even){
					background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}
	.ynq-ScrollView{
		height: calc(100vh - 160rpx);
	}
	.Click-Latter{
		font-size:30rpx !important;
	}
	
</style>
